<!--
    配置式搜索表单组件
-->
<template>
  <div class="config-search">
    <template v-for="(item, index) in searchConfig" :key="index">
      <search-item v-if="!item.slot" :label="item.label">
        <!--  输入框  -->
        <a-input
          v-if="item.type === 'input'"
          v-model:value="searchForm[item.key]"
          :disabled="getDisable(item)"
          :style="{ width: item.width ? item.width : '200px' }"
          :placeholder="item.placeholder ? item.placeholder : '请输入' + item.label"
          @change="
            (e: any) => {
              formElementChange(e, item, searchForm)
            }
          "
          @blur="
            (e: any) => {
              formElementBlur(e, item, searchForm)
            }
          "
        ></a-input>
        <!--  数字输入框  -->
        <a-input-number
          v-if="item.type === 'inputNumber'"
          v-model:value="searchForm[item.key]"
          :disabled="getDisable(item)"
          :style="{ width: item.width ? item.width : '200px' }"
          :placeholder="item.placeholder ? item.placeholder : '请输入' + item.label"
          @change="
            (e: any) => {
              formElementChange(e, item, searchForm)
            }
          "
          @blur="
            (e: any) => {
              formElementBlur(e, item, searchForm)
            }
          "
          :min="item.min ? item.min : 0"
          :max="item.max ? item.max : 1000"
        />
        <!--  下拉选择框  -->
        <a-select
          v-if="item.type === 'select'"
          v-model:value="searchForm[item.key]"
          :mode="item.mode ? item.mode : ''"
          :disabled="getDisable(item)"
          :style="{ width: item.width ? item.width : '200px' }"
          :placeholder="item.placeholder ? item.placeholder : '请选择' + item.label"
          @change="
            (e: any) => {
              formElementChange(e, item, searchForm)
            }
          "
        >
          <template v-for="(selectItem, index) in item.selectList" :key="index">
            <a-select-option
              :vaule="getSelectValue(item, selectItem)"
            >{{ getSelectLabel(item, selectItem) }}</a-select-option>
          </template>
        </a-select>
        <!--  级联选择  -->
        <a-cascader
          v-if="item.type === 'cascader'"
          v-model:value="searchForm[item.key]"
          :options="item.options"
          :style="{ width: item.width ? item.width : '200px' }"
          :display-render="({ labels }: any) => (item.displayRender ? item.displayRender(labels) : {})"
          :expand-trigger="item.expandTrigger ? item.expandTrigger : 'hover'"
          :placeholder="item.placeholder ? item.placeholder : '请选择' + item.label"
          :defaultValue="item.defaultValue ? item.defaultValue : []"
          @change="
            (e: any) => {
              formElementChange(e, item, searchForm)
            }
          "
        />

        <!--  时间选择器  -->
        <a-date-picker
          v-if="item.type === 'time'"
          v-model:value="searchForm[item.key]"
          :style="{ width: item.width ? item.width : '200px' }"
          @change="
            (e: any) => {
              formElementChange(e, item, searchForm)
            }
          "
          @ok="
            (e: any) => {
              formElementOk(e, item, searchForm)
            }
          "
        />
        <a-range-picker
          v-if="item.type === 'rangeTime'"
          v-model:value="searchForm[item.key]"
          :style="{ width: item.width ? item.width : '500px' }"
          :ranges="item.ranges"
          :show-time="item.showTime"
          :format="item.format ? item.format : 'YYYY/MM/DD HH:mm:ss'"
          @change="
            (e: any) => {
              formElementChange(e, item, searchForm)
            }
          "
          @ok="
            (e: any) => {
              formElementOk(e, item, searchForm)
            }
          "
        />
      </search-item>
      <template v-if="item.slot">
        <slot :name="item.slot"></slot>
      </template>
    </template>
    <div class="search-handle"></div>
  </div>
</template>

<script setup lang="ts">
import SearchItem from './searchItem.vue'
import { reactive } from 'vue'
import { searchCofigType } from './type'
interface configSearchProps {
  // 搜索表单配置
  searchConfig: searchCofigType[],
  // 默认显示最多的表单个数，其余表单需要点击展开才能显示
  showNumber?: number | string
}
const props = defineProps<configSearchProps>()
const emit = defineEmits(['change'])
const searchForm = reactive({})

const formElementChange = (e: any, item: searchCofigType, searchForm: { [key: string]: any }) => {
  emit('change', {
    e,
    item,
    searchForm
  })
}

const formElementBlur = (e: any, item: searchCofigType, searchForm: { [key: string]: any }) => {
  emit('change', {
    e,
    item,
    searchForm
  })
}

const formElementOk = (e: any, item: searchCofigType, searchForm: { [key: string]: any }) => {
  emit('change', {
    e,
    item,
    searchForm
  })
}

const getDisable = (item: searchCofigType) => {
  return item.disabled
}

// 下拉选择处理
const getSelectValue = (item: searchCofigType, selectItem) => {
  if (item.valueFormat) {
    return item.valueFormat(selectItem)
  }
  if (item.valueKey) {
    return selectItem[item.valueKey]
  }
  return item['value']
}

// 下拉选择处理
const getSelectLabel = (item, selectItem) => {
  if (item.labelFormat) {
    return item.labelFormat(selectItem)
  }
  if (item.labelKey) {
    return selectItem[item.labelKey]
  }
  return item['label']
}
</script>

<style scoped></style>
